<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="#{T1001}">#{}</title>
    <style type="text/css">
        .error {
            color: red !important;
        }
        .btn3_mouseout {
            BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
        }
        .btn3_mouseover {
            BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
        }
        .btn3_mousedown
        {
            BORDER-RIGHT: #FFE400 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #FFE400 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #FFE400 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #FFE400 1px solid
        }
        .btn3_mouseup {
            BORDER-RIGHT: #2C59AA 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #2C59AA 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5); BORDER-LEFT: #2C59AA 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #2C59AA 1px solid
        }
    </style>
    <script src="js/jquery-1.10.1.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/localization/messages_ja.js"></script>
    <script th:inline="javascript">
        $(document).ready(function () {
            // $("#myform").validate({meta: "validate"});
            $("#myform").validate({
                rules: {
                    loginname: {
                        required: true,
                        minlength: 4,
                        maxlength: 16
                    },
                    password: {
                        required: true
                    }
                },
                //自定义错误提示信息
                messages: {
                    loginname: {
                        required: [[#{E0003}]]
                    },
                    password: {
                        required: [[#{E0004}]]
                    }
                },
            });


        })

    </script>

</head>
<body style="background-image: url(image/bodybg.png)">
<form id="myform" action="login.action" method="post">
    <table cellpadding="0" cellspacing="0" align="center" border="0" style="background: url(image/login.jpg); background-size: contain;background-repeat: no-repeat;width: 750px;
        height: 550px;">
        <tr>
            <td valign="top">
                <div style="padding-left: 220px; padding-top: 180px">
                    <span id="Span1" style="color: #448797; font-size: Larger; font-weight: bold;" th:text="#{T1002}"></span></div>
                <div style="padding-left: 220px; padding-top: 8px">
                </div>
                <div style="padding-left: 220px; padding-top: 20px">
                       <span th:utext="${msg}" class="error" style="display: inline-block;"></span>
                    <table cellpadding="0px" cellspacing="0px" border="0px">
                        <tr>
                            <td th:text="#{L1001}">
                                </td>
                            <td>
                                <input type="text"  name="loginname" style="width: 150px;" placeholder="入力してください" th:value="${param.loginname}" /></td>
                        </tr>
                        <tr>
                            <td th:text="#{L1002}"></td>
                            <td>

                                <input type="password"  name="password"  style="width: 150px;" /></td>
                        </tr>
                        <tr>
                            <td align="center" colspan="2">
                                <input type="submit"  th:value="#{B1001}" tabindex="3" class="btn3_mouseout" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" style="border-width:1px;border-style:solid;font-weight:bold;" />
                                <input type="reset"  th:value="#{B1002}" tabindex="3" class="btn3_mouseout" onMouseOver="this.className='btn3_mouseover'" onmouseout="this.className='btn3_mouseout'" onmousedown="this.className='btn3_mousedown'" onmouseup="this.className='btn3_mouseup'" style="border-width:1px;border-style:solid;font-weight:bold;" />
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</form>

</body>
</html>